<template>
	<view class="login">
		<!-- #ifndef MP-WEIXIN -->
		<image class="login-bg" src="../../static/images/account/login-bg.png"></image>
		<image class="colse" src="../../static/images/common/close-white.png" @click="onCloseTap"></image>
		<view class="header">
			<view class="h-item" :class="pageObj.tabIndex === idx ? 'selected' : ''" v-for="(item, idx) in pageObj.headerList" :key="item.id" @click="onHeaderTap(idx)">{{item.title}}</view>
		</view>
		
		<swiper
			class="body-swiper"
			:current="pageObj.tabIndex"
			@change="bodySwiperChange">
			<!-- 登陆 -->
			<swiper-item class="body-swiper-item">
				
				<!-- 账号密码登录 -->
				<view class="block" v-if="pageObj.isPsw">
					<view class="title">欢迎来到仁邦APP</view>
					<view class="content">
						<view class="c-item">
							<view class="c-item-title">手机号</view>
							<input class="c-item-input" v-model="dataObj.mobile" placeholder="请输入手机号" />
						</view>
						<view class="c-item">
							<view class="c-item-title">密码</view>
							<input class="c-item-input" password v-model="dataObj.psw" placeholder="请输入密码" />
						</view>
					</view>
					<view class="login-btn" @click="onPostTap('login')">登录</view>
					<view class="btns">
						<view class="left" @click="onChangeLoginTap">手机验证码登录</view>
						<view class="right" @click="onForgetPswTap">忘记密码？</view>
					</view>
				</view>
				
				<!-- 手机验证码登录 -->
				<view class="block" v-else>
					<view class="title">欢迎来到仁邦APP</view>
					<view class="content">
						<view class="c-item">
							<view class="c-item-title">手机号</view>
							<input class="c-item-input" v-model="dataObj.mobile" placeholder="请输入手机号" />
						</view>
						<view class="c-item verification">
							<view class="c-item-title">验证码</view>
							<input class="c-item-input" v-model="dataObj.verification" placeholder="请输入验证码" />
							<view class="verification-btn" @click="onGetVerificationTap('login')">{{loginMin < 60 ? '倒计时' + loginMin + '秒' : '获取验证码'}}</view>
						</view>
					</view>
					<view class="login-btn" @click="onPostTap('verification')">登录</view>
					<view class="btns">
						<view class="left" @click="onChangeLoginTap">账号密码登录</view>
					</view>
				</view>
			</swiper-item>
			
			<!-- 注册 -->
			<swiper-item class="body-swiper-item">
				<view class="block">
					<view class="title">欢迎来到仁邦APP</view>
					<view class="content">
						<view class="c-item">
							<view class="c-item-title">手机号</view>
							<input class="c-item-input" v-model="dataObj.mobile" placeholder="请输入手机号" />
						</view>
						<view class="c-item">
							<view class="c-item-title">密码</view>
							<input class="c-item-input" password v-model="dataObj.psw" placeholder="请输入密码" />
						</view>
						<view class="c-item">
							<view class="c-item-title">确认密码</view>
							<input class="c-item-input" password v-model="dataObj.confirmPsw" placeholder="请输入确认密码" />
						</view>
						<view class="c-item verification">
							<view class="c-item-title">验证码</view>
							<input class="c-item-input" v-model="dataObj.verification" placeholder="请输入验证码" />
							<view class="verification-btn" @click="onGetVerificationTap('reg')">{{regMin < 60 ? '倒计时' + regMin + '秒' : '获取验证码'}}</view>
						</view>
					</view>
					<view class="login-btn" @click="onPostTap('register')">注册</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 底部 -->
		<view class="footer">
			<!-- <view class="f-title">通过以下方式登录</view>
			<button class="wechat-login" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
				<image class="wechat-icon" src="../../static/images/account/wechat.png"></image>
			</button> -->
			
			<view class="f-agreement">
				<view class="f-check" :class="pageObj.agreement ? 'selected' : ''" @click="onAgreementTap"></view>
				<span>{{pageObj.tabIndex ? '注册' : '登录'}}代表同意</span>
				<span class="oringe" @click="userAgreementObj.show = true">《用户协议》</span>
				<span>及</span>
				<span class="oringe" @click="privacyPolicyObj.show = true">《隐私政策》</span>
			</view>
		</view>
		<!-- #endif -->
		
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="wx">
			<image class="bg" src="../../static/images/account/bg.png"></image>
			<image class="wx-logo" src="../../static/images/account/logo.png"></image>
			<button class="wx-login" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">立即登录</button>
		</view>
		<!-- #endif -->
		<!-- 用户协议 -->
		<user-agreement v-if="userAgreementObj.show" @onCloseTap="closePopup"></user-agreement>
		<!-- 隐私政策 -->
		<privacy-policy v-if="privacyPolicyObj.show" @onCloseTap="closePopup"></privacy-policy>
	</view>
</template>

<script>
	import { requestErrorTip, checkMobileReg, handleToken } from '@/common/tools.js';
	import userAgreement from '@/components/popup/userAgreement.vue';
	import privacyPolicy from '@/components/popup/privacyPolicy.vue';
	
	export default {
		components: {
			userAgreement,
			privacyPolicy
		},
		data() {
			return {
				loginMin: 60,
				regMin: 60,
				pageObj: {
					tabIndex: 0,
					headerList: [{
						id: 1,
						title: '登陆'
					}, {
						id: 2,
						title: '注册'
					}],
					agreement: false,
					isPsw: true
				},
				dataObj: {
					mobile: '', // 手机号码
					psw: '', // 密码
					confirmPsw: '', // 确认密码
					verification: '', // 验证码
					wxUserId: '' // 小程序用户id
				},
				userAgreementObj: {
					show: false
				},
				privacyPolicyObj: {
					show: false
				}
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.wxLogin();
			wx.showShareMenu({
				withShareTicket:true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"]
			});
			// #endif
		},
		methods: {
			// 微信登录
			wxLogin() {
				wx.login({
					success: (res) => {
						if (res.code) {
							// 赋值
							this.postWxCode(res.code);
							
						} else {
							console.log('登录失败！' + res.errMsg);
						}
					}
				});
			},
			// 请求获取获取小程序用户id
			postWxCode(code) {
				this.$Requset({
					url: this.$Api['account']['wxLogin'],
					data: {
						code: code
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						this.dataObj['wxUserId'] = data; // 保存小程序用户id
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 微信小程序授权
			bindGetUserInfo (e) {
				this.$Requset({
					url: this.$Api['account']['wxUserInfo'],
					data: {
						id: this.dataObj['wxUserId'],
						iv: e['detail']['iv'],
						edata: e['detail']['encryptedData']
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						if(data['has_bind_mobile'] === 1) {
							// 已经绑定手机号码
							handleToken(data['token'], data['mobile']);
						} else {
							// 未绑定手机号码
							uni.navigateTo({
								url: './bind-mobile?wxUserId=' + this.dataObj['wxUserId']
							});
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 关闭页面事件
			onCloseTap() {
				uni.navigateBack(); // 返回上一页
			},
			// 头部点击事件
			onHeaderTap(index) {
				this.pageObj['tabIndex'] = index;
			},
			// 左右切换主体
			bodySwiperChange (event) {
				this.pageObj.tabIndex = event.detail.current;
			},
			// 更换登陆方式
			onChangeLoginTap() {
				this.pageObj['isPsw'] = !this.pageObj['isPsw'];
			},
			// 忘记密码
			onForgetPswTap() {
				uni.navigateTo({
					url: './forget-psw'
				});
			},
			countDown(key) {
				const that = this;
				that[key]--;
				if (that[key]) {
					setTimeout(() => {
						that.countDown(key);
					}, 1000);
				} else {
					that[key] = 60;
				}
			},
			// 获取验证码
			onGetVerificationTap(code) {
				const data = this.dataObj;
				if (data['mobile'] === '') {
					requestErrorTip('toast', '请输入手机号');
					return false;
				}
				if (!checkMobileReg(data['mobile'])) {
					requestErrorTip('toast', '请输入正确的手机号');
					return false;
				}
				if (this.loginMin < 60 && code === 'login') {
					requestErrorTip('toast', '倒计时结束后才能重新获取新的验证码');
					return false;
				}
				if (this.regMin < 60 && code === 'reg') {
					requestErrorTip('toast', '倒计时结束后才能重新获取新的验证码');
					return false;
				}
				this.countDown(code + 'Min');
				
				this.checkField('', () => {
					this.$Requset({
						url: this.$Api['account']['verification'],
						data: {
							mobile: this.dataObj['mobile'],
							code: code // reg：注册；login：登录；veri：手机修改；
						},
						method: 'post',
						success: (res) => {
							const { status, msg } = res;
							if (status) {
								requestErrorTip('toast', '验证码获取成功');
							} else {
								requestErrorTip('toast', msg);
							}
						},
						fail: (err) => {
							requestErrorTip('toast', '验证码获取失败，请重新获取');
						}
					});
				});
			},
			// 微信登陆
			onWechatTap() {
				uni.navigateTo({
					url: './bind-mobile'
				});
			},
			// 协议
			onAgreementTap() {
				this.pageObj['agreement'] = !this.pageObj['agreement']
			},
			closePopup() {
				this.userAgreementObj.show = false
				this.privacyPolicyObj.show = false
			},
			// 登陆、注册
			onPostTap(type) {
				if (!this.pageObj['agreement']) {
					requestErrorTip('toast', '请勾选同意底部协议');
					return false;
				}
				switch(type) {
					case 'login': // 账号密码登录
						this.checkField(type, () => {
							this.postLoginPsw();
						});
						break;
					case 'verification': // 手机验证码登录
						this.checkField(type, () => {
							this.postLoginCode();
						});
						break;
					case 'register': // 注册
						this.checkField(type, () => {
							this.postRegisterApp();
						});
						break;
					default:
						break;
				}
			},
			// APP 注册
			postRegisterApp() {
				this.$Requset({
					url: this.$Api['account']['regist'],
					data: {
						mobile: this.dataObj['mobile'],
						password: this.dataObj['psw'],
						code: this.dataObj['verification']
					},
					method: 'post',
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						requestErrorTip('toast', '注册成功，请登录');
						this.pageObj.tabIndex = 0;
						this.pageObj.isPsw = true;
						this.pageObj.confirmPsw = '';
						this.pageObj.verification = '';
						// 注册手机号码(考试系统)
						registExam(this.dataObj['mobile']);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 提交登陆(密码登陆)
			postLoginPsw() {
				this.$Requset({
					url: this.$Api['account']['login'],
					data: {
						mobile: this.dataObj['mobile'],
						password: this.dataObj['psw'],
						login_type: 2
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						handleToken(data, this.dataObj['mobile']);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 提交登陆(验证码登陆)
			postLoginCode() {
				this.$Requset({
					url: this.$Api['account']['bingMobile'],
					data: {
						mobile: this.dataObj['mobile'],
						code: this.dataObj['verification'],
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						handleToken(data, this.dataObj['mobile']);
						// 注册手机号码(考试系统)
						registExam(this.dataObj['mobile']);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 提交注册
			postRegister() {
				console.log('提交注册');
				
				uni.reLaunch({
					url: '/pages/user/user'
				});
			},
			 // 校验提交字段
			checkField(type, cb) {
				const data = this.dataObj;
				if (data['mobile'] === '') {
					requestErrorTip('toast', '请输入手机号');
					return false;
				}
				if (!checkMobileReg(data['mobile'])) {
					requestErrorTip('toast', '请输入正确的手机号');
					return false;
				}
				if (type === 'login' || type === 'register') {
					if (data['psw'] === '') {
						requestErrorTip('toast', '请输入密码');
						return false;
					}
					if (data['psw'].length < 6) {
						requestErrorTip('toast', '请输入长度至少6位的密码');
						return false;
					}
				}
				if (type === 'register') {
					if (data['confirmPsw'] === '') {
						requestErrorTip('toast', '请输入确认密码');
						return false;
					}
					if (data['psw'] !== data['confirmPsw']) {
						requestErrorTip('toast', '两次密码不一致');
						return false;
					}
				}
				if (type === 'verification' || type === 'register') {
					if (data['verification'] === '') {
						requestErrorTip('toast', '请输入验证码');
						return false;
					}
				}
				// 校验通过，发起回调并请求接口
				cb && cb();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.login{
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% 226rpx;
		// #ifdef APP-PLUS
		padding-top: 60rpx;
		// #endif
		// background-image: url(../../static/images/account/login-bg.png);
		.login-bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 288rpx;
			// #ifdef APP-PLUS
			z-index: -1;
			// #endif
			background-color: red;
		}
		.colse{
			width: 40rpx;
			height: 40rpx;
			padding: 25rpx 40rpx;
		}
		.header{
			position: absolute;
			top: 80;
			left: 0;
			width: 100%;
			height: 60rpx;
			padding: 14rpx 10rpx;
			box-sizing: border-box;
			.h-item{
				float: left;
				width: 130rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
			}
			.selected{
				font-size: 42rpx;
			}
		}
		.body-swiper{
			height: 900rpx;
			padding-top: 100rpx;
		}
		.block{
			padding: 54rpx 50rpx;
			.title{
				line-height: 56rpx;
				font-size: 40rpx;
				color: #1A1A1A;
				margin-bottom: 54rpx;
			}
			.content{
				margin-bottom: 44rpx;
				.c-item{
					position: relative;
					height: 80rpx;
					border: 1rpx solid #EAEFF1;
					border-radius: 40rpx;
					padding-left: 162rpx;
					margin-bottom: 22rpx;
					&-title{
						position: absolute;
						top: 0;
						left: 0;
						width: 162rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						color: #373737;
						text-align: center;
					}
					&-input{
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						color: #373737;
					}
				}
				.verification{
					padding-right: 200rpx;
					.verification-btn{
						position: absolute;
						top: 0;
						right: 0;
						width: 180rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						color: $color-common;
					}
				}
			}
			.login-btn{
				height: 82rpx;
				line-height: 82rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				border-radius: 41rpx;
				background-color: $color-common;
				margin-bottom: 24rpx;
			}
			.btns{
				height: 40rpx;
				line-height: 40rpx;
				font-size: 26rpx;
				color: #373737;
				.left{
					float: left;
				}
				.right{
					float: right;
				}
			}
		}
		.footer{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 300rpx;
			.f-title{
				position: relative;
				width: 208rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				color: #7F7F7F;
				text-align: center;
				margin: 0 auto 30rpx;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					left: -72rpx;
					width: 72rpx;
					height: 1rpx;
					background-color: #EAEFF1;
				}
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					right: -72rpx;
					width: 72rpx;
					height: 1rpx;
					background-color: #EAEFF1;
				}
			}
			.wechat-login{
				position: relative;
				display: block;
				width: 82rpx;
				height: 82rpx;
				margin: 0 auto 60rpx;
				border: 0;
			}
			.wechat-icon{
				position: absolute;
				display: block;
				top: 0;
				left: 0;
				width: 82rpx;
				height: 82rpx;
			}
			.f-agreement{
				height: 30rpx;
				font-size: 0;
				text-align: center;
				.f-check{
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					margin-right: 8rpx;
					vertical-align: middle;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100%;
					background-image: url(../../static/images/cart/select.png);
				}
				.selected{
					background-image: url(../../static/images/cart/selected.png);
				}
				span{
					line-height: 30rpx;
					font-size: 22rpx;
					color: #7F7F7F;
					vertical-align: middle;
				}
				.oringe{
					color: $color-common;
				}
			}
		}
		.wx{
			position: relative;
			width: 100vw;
			height: 100vh;
			.bg{
				position: absolute;
				z-index: -1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.wx-logo{
				display: block;
				position: absolute;
				z-index: 1;
				top: 320rpx;
				left: 50%;
				margin-left: -130rpx;
				width: 200rpx;
				height: 200rpx;
				padding: 0 30rpx 200rpx;
				&::after{
					display: block;
					content: '仁邦集团';
					position: absolute;
					z-index: 1;
					bottom: 100rpx;
					left: 50%;
					margin-left: -150rpx;
					width: 300rpx;
					height: 72rpx;
					line-height: 72rpx;
					font-size: 52rpx;
					font-weight: bold;
					color: #333;
					text-align: center;
				}
			}
			.wx-login{
				position: absolute;
				bottom: 300rpx;
				left: 50%;
				margin-left: -280rpx;
				width: 560rpx;
				height: 84rpx;
				line-height: 84rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				border-radius: 42rpx;
				background-color: #FE6B00;
			}
		}
	}
</style>
